<script setup lang="ts">
import type { VxeGridProps, VxeTableInstance } from 'vxe-table'

import { useDeleteEnterpriseCustomer, useGetEnterpriseCustomerPage } from '@fl/api/supplier'
import { SearchTable } from '@fl/components'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { useMessage } from '@fl/hooks/web/use-message'
import { downloadFileWithUrl, singleFileJsonObj } from '@fl/utils/fn'

import AddOrEdit from './add-or-edit.vue'
import Detail from './detail.vue'

const { createConfirmModal } = useMessage()

const showAddOrEdit = ref<boolean>(false)
const showDetail = ref<boolean>(false)
const addOrEditId = ref<string>('')
const detailId = ref<string>('')

const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const getEnterpriseCustomerPageParams = computed(() => ({
    page: tablePage.currentPage,
    size: tablePage.pageSize,
}))

const { data: enterpriseCustomerPageData, isLoading: isGetEnterpriseCustomerPageLoading, total: enterpriseCustomerTotal } = useGetEnterpriseCustomerPage(getEnterpriseCustomerPageParams)
const { isPending: isDeleteEnterpriseCustomerPending, mutate: deleteEnterpriseCustomer } = useDeleteEnterpriseCustomer()

// #region Table
const tableRef = ref<VxeTableInstance>()
const isTableLoading = computed(() => isGetEnterpriseCustomerPageLoading.value)

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'name', title: '合作用户名称' },
        { field: 'startTime', title: '开始合作时间' },
        { field: 'money', title: '上年度合作金额（万元）' },
        { field: 'contractFile', slots: { default: 'contract_file' }, title: '合同附件' },
        { field: 'caseFile', slots: { default: 'case_file' }, title: '案例附件' },
        { field: 'operation', slots: { default: 'operation' }, title: '操作', width: 200 },
    ],
})

watchEffect(() => {
    tablePage.total = enterpriseCustomerTotal.value
})
// #endregion

// #region UI Listener
function onAddBtnClick() {
    addOrEditId.value = ''
    showAddOrEdit.value = true
}

function onCheckDetailBtnClick(row: any) {
    detailId.value = row.id
    showDetail.value = true
}

function onEditBtnClick(row: any) {
    addOrEditId.value = row.id
    showAddOrEdit.value = true
}

function onDeleteBtnClick(row: any) {
    createConfirmModal({
        content: '一旦删除不可恢复',
        onSuccess: () => {
            deleteEnterpriseCustomer(row.id, {
                onSuccess() {
                    ElMessage.success('操作成功')
                },
            })
        },
        title: '要删除吗?',
    })
}
// #endregion
</script>

<template>
    <el-card shadow="never">
        <div class="inline-block w-full">
            <el-button type="primary"
                       class="float-right"
                       @click="onAddBtnClick"
            >
                新增
            </el-button>
        </div>

        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="tablePage"
                     :data="enterpriseCustomerPageData"
                     row-class-name="table-row-style"
                     :loading="isTableLoading"
        >
            <template #contract_file="{ row }">
                <span class="text-#409EFF truncate cursor-pointer"
                      @click="downloadFileWithUrl(singleFileJsonObj(row.contractFile).url, singleFileJsonObj(row.contractFile).name)"
                >
                    {{ singleFileJsonObj(row.contractFile).name }}
                </span>
            </template>

            <template #case_file="{ row }">
                <span class="text-#409EFF truncate cursor-pointer"
                      @click="downloadFileWithUrl(singleFileJsonObj(row.caseFile).url, singleFileJsonObj(row.caseFile).name)"
                >
                    {{ singleFileJsonObj(row.caseFile).name }}
                </span>
            </template>

            <template #operation="{ row }">
                <el-button text
                           type="primary"
                           class="!p-4"
                           @click="onCheckDetailBtnClick(row)"
                >
                    查看
                </el-button>

                <SubmitBtn text
                           type="primary"
                           class="!p-4"
                           @click="onEditBtnClick(row)"
                >
                    编辑
                </SubmitBtn>

                <SubmitBtn text
                           type="primary"
                           class="!p-4"
                           :loading="isDeleteEnterpriseCustomerPending"
                           @click="onDeleteBtnClick(row)"
                >
                    删除
                </SubmitBtn>
            </template>
        </SearchTable>
    </el-card>

    <AddOrEdit :key="addOrEditId"
               v-model:id="addOrEditId"
               v-model:visible="showAddOrEdit"
    />

    <Detail :key="detailId"
            v-model:id="detailId"
            v-model:visible="showDetail"
    />
</template>
